<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper-4.2.2.min.css" />
    <style>
         html,body{
           background-color: transparent;
         }
        .moreSection{
          width: 100%;
          background: transparent;
          margin-top: 8px;
        }
        .aui-list{
          background-image: linear-gradient(0,transparent,transparent 50%,transparent 50%);
        }
        .aui-list .aui-list-item{
          background-image: linear-gradient(0,transparent,transparent 50%,transparent 50%);
          background-image: -webkit-linear-gradient(90deg,transparent,transparent,transparent 50%);
        }
        .commentL{
          font-size: 15px!important;
          color: #000!important;
        }
        .stars{
          display: inline-block;
          width: 9px;
        }
        .aui-list{
          background-color: transparent;
        }
        .aui-list-item-text-first{
          line-height: 18px;
          margin-bottom: 10px;
        }
        .detailTime{
          color: #969696!important;
          font-size: 16px!important;
        }
        .detailCount{
          color: #595959!important;;
          font-size: 12px!important;
        }
        .detailCountName{
          font-size: 17px!important;
          color: #E60013!important;
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
          .aui-list-item-text-first {
              line-height: 12px;
              margin-bottom: 8px;
          }
          .commentL,
          .detailTime {
              font-size: 11px!important;
          }
          .detailCount,
          .detailCountName{
              font-size: 12px!important;
          }
          .orderStauts{
            font-size: 10px!important
          }
        }
        .swiper-container{
            overflow: hidden;
        }
        /*.swiper-pagination{
              height: 54px;
              position: fixed;
              top: 5px;
        }*/

        .aui-tab {
            position: fixed;
            width: 100%;
            background: #ffffff;
            z-index: 3;
            top: 0;
            left: 0;
            padding: 0 20px;
        }
        .tabs{
          position: relative;
          font-size: 19px;
          letter-spacing: 3px;
          color: #969696;
        }
        .tabBorder{
          display: inline-block;
          width: 100%;
          height: 2px;
          background: url(../../image/main/tab@2x.png) no-repeat center;
          background-size: 100% 100%;
          position: absolute;
          left: 0;
          bottom: 0px;
        }
        .tabActiv{
          color: #141414;
        }
        .aui-list .aui-list-item-media img{
          height: 100%;
        }
        .orderStauts{
          font-size: 14px;
          color: #969696;
          padding-left: 10px;
        }
        .orderNum{
          font-size: 12px;
        }
        .Robbing{
          font-size: 14px;
          color: #E60013;
          border: 1px solid #E60013;
          border-radius: 20px;
        }
        .Robbing .aui-bar-btn-item{
          display: inline;
          line-height: 22px;
          border-color: transparent;
          padding: 0 14px;
        }
        #wrapper{
            margin: 44px 0 0 0;
            padding-top: 20px;
        }
    </style>
</head>

<body onload="loaded()">

            <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}" >
                <div class="aui-tab">
                    <div class="aui-tab-item " v-for="(tabItem,index) in tabList" @click="tabActiv(index)">
                      <span class="tabs " :class="{tabActiv:index == slideIndex}">{{tabItem.tabItemName}}</span>
                      <span class="tabBorder" v-show="index == slideIndex"></span>
                    </div>
                </div>
                <div id="wrapper" v-bind:style="{height:wrapHeight}">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <ul class="aui-list aui-media-list">
                          <li class="aui-list-item aui-list-item-middle" v-for="commentItem in commentList1">
                              <div class="aui-media-list-item-inner">
                                  <div class="aui-list-item-media" style="width:3rem;height: 3.3rem;">
                                      <img :src="commentItem.orderImg" class="aui-img-round" >
                                  </div>
                                  <div class="aui-list-item-inner">
                                      <div class="aui-list-item-text aui-list-item-text-first">
                                          <div class="aui-list-item-title commentL">{{commentItem.commentItemName}}<span class="orderStauts">待抢单</span></div>
                                          <div class="aui-list-item-right detailTime" v-html="commentItem.btnsItem"></div>
                                      </div>
                                      <div class="aui-list-item-text">
                                        <div class="aui-list-item-title detailCountName">￥{{commentItem.balanceItem}}/<sapn class="orderNum">{{commentItem.getOrdersItem}}人</span></div>
                                        <div class="aui-list-item-right detailCount">时间：{{commentItem.commentItemTime}}</div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                      </ul>
                    </div>
                    <div class="swiper-slide">
                      <ul class="aui-list aui-media-list">
                          <li class="aui-list-item aui-list-item-middle" v-for="commentItem in commentList2">
                              <div class="aui-media-list-item-inner">
                                  <div class="aui-list-item-media" style="width:3rem;height: 3.3rem;">
                                      <img :src="commentItem.orderImg" class="aui-img-round" >
                                  </div>
                                  <div class="aui-list-item-inner">
                                      <div class="aui-list-item-text aui-list-item-text-first">
                                          <div class="aui-list-item-title commentL">{{commentItem.commentItemName}}<span class="orderStauts">待抢单</span></div>
                                          <div class="aui-list-item-right detailTime" v-html="commentItem.btnsItem"></div>
                                      </div>
                                      <div class="aui-list-item-text">
                                        <div class="aui-list-item-title detailCountName">￥{{commentItem.balanceItem}}/<sapn class="orderNum">{{commentItem.getOrdersItem}}人</span></div>
                                        <div class="aui-list-item-right detailCount">时间：{{commentItem.commentItemTime}}</div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                      </ul>
                    </div>
                    <div class="swiper-slide">
                      <ul class="aui-list aui-media-list">
                          <li class="aui-list-item aui-list-item-middle" v-for="commentItem in commentList3">
                              <div class="aui-media-list-item-inner">
                                  <div class="aui-list-item-media" style="width:3rem;height: 3.3rem;">
                                      <img :src="commentItem.orderImg" class="aui-img-round" >
                                  </div>
                                  <div class="aui-list-item-inner">
                                      <div class="aui-list-item-text aui-list-item-text-first">
                                          <div class="aui-list-item-title commentL">{{commentItem.commentItemName}}<span class="orderStauts">待抢单</span></div>
                                          <div class="aui-list-item-right detailTime" v-html="commentItem.btnsItem"></div>
                                      </div>
                                      <div class="aui-list-item-text">
                                        <div class="aui-list-item-title detailCountName">￥{{commentItem.balanceItem}}/<sapn class="orderNum">{{commentItem.getOrdersItem}}人</span></div>
                                        <div class="aui-list-item-right detailCount">时间：{{commentItem.commentItemTime}}</div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                      </ul>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
              </div>
            </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/swiper-4.2.2.min.js"></script>
<script type="text/javascript" src="../../script/vue-awesome-swiper.js"></script>
<script type="text/javascript" src="../../script/iscroll.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
       api.parseTapmode();
       api.setFrameAttr({
          bgColor : '../../image/main/info@2x.png'
       });
    };
    Vue.use(window.VueAwesomeSwiper);
    function loaded() {
        var wrapper = document.getElementById('wrapper');
        var myscroll1 = new iScroll(wrapper,{
            vScrollbar : false,
            hScrollbar : false
        });
    }
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#moreSection',
        data: {
            wHeight: '',
            wrapHeight: '',
            showMask1 : false,
            showMask2 : false,
            Swiper : '',
            slideIndex : '0',
            tabList : [
              {tabItemName :'可抢订单'},{tabItemName :'进行中'},{tabItemName :'已完成'}
            ],
            imgList : [/////tab底部黑条
              {imgs : '../../image/test@2x.png'},{imgs : '../../image/test@2x.png'},{imgs : '../../image/test@2x.png'}
            ],
            commentList1 : [
              {
                orderImg : '../../image/test@2x.png',
                commentItemName : '小提琴独奏',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
                balanceItem : "1654.00",
                getOrdersItem :'1',
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
               commentItemName : '小提琴独奏',
               btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
               balanceItem : "1654.00",
               getOrdersItem :'1',
               commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                commentItemName : '小提琴独奏',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
                balanceItem : "1654.00",
                getOrdersItem :'1',
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                commentItemName : '小提琴独奏',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
                balanceItem : "1654.00",
                getOrdersItem :'1',
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                commentItemName : '小提琴独奏',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
                balanceItem : "1654.00",
                getOrdersItem :'1',
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                commentItemName : '小提琴独奏',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
                balanceItem : "1654.00",
                getOrdersItem :'1',
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                commentItemName : '小提琴独奏',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
                balanceItem : "1654.00",
                getOrdersItem :'1',
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                commentItemName : '小提琴独奏',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
                balanceItem : "1654.00",
                getOrdersItem :'1',
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                commentItemName : '小提琴独奏',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">抢单</div></div>',
                balanceItem : "1654.00",
                getOrdersItem :'1',
                commentItemTime : "2018-03-02",
              }
            ],
            commentList2 : [
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">取消订单</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">取消订单</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">同意退款</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              }
            ],
            commentList3 : [
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">评价</div></div>',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '<div class="Robbing"><div class="aui-bar-btn-item">评价</div></div>',
               commentItemName : '小提琴独奏',
               balanceItem : "1654.00",
               commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/person@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              },
              {
                orderImg : '../../image/test@2x.png',
                btnsItem : '',
                commentItemName : '小提琴独奏',
                balanceItem : "1654.00",
                commentItemTime : "2018-03-02",
              }
            ],
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh) + 'px';
                this.wrapHeight = (wh-44) + 'px';
            },
            ////点击切换列表
            tabActiv: function(n) {
                this.slideIndex = n;
                this.Swiper.slideTo(n, 300, false);//切换
            }
        },
        mounted() {
          var vm = this;
          ////初始化定义swiper
           this.Swiper =  new Swiper('.swiper-container', {
              speed:300,
              on: {
                  slideChangeTransitionStart: function(){////tab切换
                    vm.slideIndex = this.activeIndex;
                  }
              }
            })
            this.init();
        }
    });
    var mainPageMethod = {

    };
</script>

</html>
